<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="right" class="flex_form">
			<el-form-item label="项目信息："  class="flex_item" prop="projectId">
				<el-select v-model="form.projectId" :disabled="isDisabled" filterable>
					<el-option v-for="item in projectList" :key="item" :label="item.projectName" :value="item.id"/>
				</el-select>
			</el-form-item>
			<el-form-item label="阶段类型：" prop="stage" class="flex_item">
				<el-radio-group v-model="form.stage">
					<el-radio-button :value="1">招标</el-radio-button>
					<el-radio-button :value="2">预算</el-radio-button>
					<el-radio-button :value="3">重计量</el-radio-button>
					<el-radio-button :value="4">结算阶段</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="工程清单上传：" class="flex_item">
				<sc-upload-file v-model="fileList" drag class="myUpload" accept=".xls, .xlsx" :limit="1" :multiple="false" :tip="'上传中...'">
					<el-icon class="el-icon--upload"><sc-icon-excel-file /></el-icon>
					<div class="el-upload__text">
							将文件拖到此处或 <em>点击选择文件上传</em>
							<p>仅允许导入xls、xlsx格式文件</p>
					</div>
				</sc-upload-file>
			</el-form-item>
			<el-form-item label="关联的PKS：" class="flex_item">
				<sc-upload-file v-model="pksList" drag class="myUpload" accept=".xls, .pks" :limit="1" :multiple="false">
					<el-icon class="el-icon--upload"><sc-icon-other-file /></el-icon>
					<div class="el-upload__text">
							将文件拖到此处或 <em>点击选择文件上传</em>
							<p>仅允许导入pks格式文件</p>
					</div>
				</sc-upload-file>
			</el-form-item>
			
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>

	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '数据导入',
					edit: '编辑用户',
					show: '查看'
				},
				visible: false,
				isSaveing: false,
				isDisabled: false,
				//表单数据
				form: {},
				fileList: [],
				pksList: [],
				//验证规则
				rules: {
					projectId: [
						{required: true, message: '请输入项目信息'}
					],
					stage: [
						{required: true, message: '请选择阶段类型', trigger: 'change'}
					],
				},
				//所需数据选项
				projectList: [],
			}
		},
		mounted() {
			this.getProjectList()
		},
		methods: {
			async getProjectList() {
				let res = await this.$API.common.projectNameList.get()
				this.projectList = res.data
			},
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				this.reset()
				return this
			},

			//筛选搜索
			remoteMethod(query) {
				setTimeout(() => {
						this.getRoleGroup(query)
				}, 200);
			},

			//表单提交方法
			submit(){
				let fileList = this.fileList
				let pksList = this.pksList
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						if(!fileList.length) {
							this.$message.error('请上传工程清单')
							return
						}
						if(!pksList.length) {
							this.$message.error('请上传关联的PKS')
							return
						}
						let form = this.form
						form.fileName = fileList[0].name
						form.fileUrl = fileList[0].url
						form.pksName = pksList[0].name
						form.pksUrl = pksList[0].url
						this.isSaveing = true;
						var res = await this.$API.common.editProjectFiles.add(form)
						this.isSaveing = false;
						if(res.code == 200){
							this.$emit('success')
							this.visible = false;
							this.$message.success("操作成功")
						}
					}
				})
			},
			//表单注入数据
			setData(data){
				let projectId = data.id
				this.form.projectId = projectId
				this.disabled = true
			},
			// 表单重置
			reset() {
				this.form = {
					projectId: '',
					stage: null,
					fileUrl: '',
					fileName: '',
					pksUrl: '',
					pksName: '',
				}
				this.fileList = []
				this.pksList = []
			},
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .el-upload-dragger {
		height: 200px;
    padding: 10px;
    .el-icon--upload {
        margin-bottom: 0;
				margin-top: 28px;
    }
    .el-upload__text {
        line-height: 24px !important;
        p {
            color: var(--el-color-primary);
        }
    }
}
</style>
